<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <style>
        /*@charset "UTF-8";*/
        /*初始化  reset*/
        blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0
        }

        body, button, input, select, textarea {
            font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
            color: #666;
        }

        ol, ul {
            list-style: none
        }

        a {
            text-decoration: none
        }

        fieldset, img {
            border: 0;
            vertical-align: top;
        }

        a, input, button, select, textarea {
            outline: none;
        }

        a, button {
            cursor: pointer;
        }

        .wrap {
            width: 1200px;
            margin: 100px auto;
        }

        .slide {
            height: 500px;
            position: relative;
        }

        .slide li {
            position: absolute;
            left: 200px;
            top: 0;
        }

        .slide li img {
            width: 100%;
        }

        .arrow {
            opacity: 0;
        }

        .prev, .next {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 50%;
            margin-top: -56px;
            background: url(img/xuanzhuanmuma/prev.png) no-repeat;
            z-index: 99;
        }

        .next {
            right: 0;
            background-image: url(img/xuanzhuanmuma/next.png);
        }
    </style>

    <!--<script src="js/animate.js"></script>-->
    <!--<script type="text/javascript" src="js/0my.js"></script>-->

</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="img/xuanzhuanmuma/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/xuanzhuanmuma/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/xuanzhuanmuma/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/xuanzhuanmuma/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="img/xuanzhuanmuma/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>

<script>
    /**
     * Created by jf on 2016/4/3.
     */
    //需求 将 任意对象 的 任意属性 渐渐地变为 目标值
    function animate(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                if (k == "opacity") {
                    var leader = getStyle(obj, k) * 100;
                    var target = json[k] * 100;
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader / 100;
                } else if (k == "zIndex") {
                    obj.style[k] = json[k];
                } else {
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + "px";
                }
                console.log("target: " + target + "leader: " + leader + "step: " + step);
                if (leader != target) {
                    flag = false;//告诉人家 我还有没到的呢
                }
            }
            //最后再判断 如果标记仍然是true说明 没有没到达的了
            //也就是都到达了
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 15)
    }

    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }

    /**
     * Created by jf on 2016/4/3.
     */
    window.onload = function () {
        //alert("haha");
        //找人
        var wrap = document.getElementById("wrap");
        var slide = document.getElementById("slide");
        var ul = slide.children[0];
        var lis = ul.children;
        var arrow = document.getElementById("arrow");
        var arrRight = document.getElementById("arrRight");
        var arrLeft = document.getElementById("arrLeft");

        var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4
        ];//其实就是一个配置单 规定了每张图片的大小位置层级透明度

        //鼠标经过wrap 让arrow渐渐地显示
        wrap.onmouseover = function () {
            animate(arrow, {"opacity": 1});
        }
        // 鼠标离开wrap让arrow隐藏
        wrap.onmouseout = function () {
            animate(arrow, {"opacity": 0});
        }

        //循环遍历 给每一个li添加配置 让他们各就各位
        function assign() {
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], config[i], function () {
                    flag = true;
                });
            }
        }

        var flag = true;//true表示可以执行动画

        assign();
        //点击箭头让轮播图转动
        arrRight.onclick = function () {
            if (flag) {
                flag = false;
                config.push(config.shift());
                assign();
            }
        }
        arrLeft.onclick = function () {
            if (flag) {
                flag = false;
                config.unshift(config.pop());
                assign();
            }
        }
    }

</script>
</body>
</html>
